<template>
  <div class="page-container">
    <DispatchDetailInfomation :detailData="state.data" :type="2"></DispatchDetailInfomation>

    <div class="tab-box tab-container">
      <el-button link @click="edit" type="primary" :disabled="state.isEdit">
        编辑
      </el-button>
      <el-button link @click="save" type="primary" v-if="state.isEdit">
        保存
      </el-button>
      <el-button link @click="cancel" type="primary" v-if="state.isEdit">
        取消
      </el-button>
    </div>

    <div class="disContent">
      <el-tabs type="border-card" class="disTab">
        <el-tab-pane label="派车信息">派车信息</el-tab-pane>
      </el-tabs>
      <div class="tabBox">
        <div class="tipBox">仓库信息</div>
        <div class="ZGBox">
          <div v-if="state.isEdit">
            <template v-for="(item, index) in state.cklist" :key="index">
              <div class="ZGtip">
                <span class="ZGtiptext">仓库地点{{ index + 1 }}</span>
                <span class="ZGtipdel" @click="delZg(index)">删除</span>
              </div>
              <div class="editBox">
                <el-row :gutter="16">
                  <el-col :span="12">
                    <div class="editItem">
                      <div class="editLabel">进仓时间</div>
                      <div class="editValue">
                        <el-date-picker v-model="item.date" type="daterange" range-separator="至" start-placeholder="开始"
                          end-placeholder="结束" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                          style="flex: 1; margin-right: 10px" />
                        <el-select style="width: 100px" v-model="item.datetype">
                          <el-option label="早上" value="早上"></el-option>
                          <el-option label="下午" value="下午"></el-option>
                        </el-select>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="editItem">
                      <div class="editLabel">仓库地点</div>
                      <div class="editValue">
                        <el-select style="width: 100%" v-model="item.address" filterable>
                          <el-option label="淄博市临淄区齐鲁化学工业园清田路18号" value="淄博市临淄区齐鲁化学工业园清田路18号"></el-option>
                          <el-option label="上海" value="上海"></el-option>
                          <el-option label="宁波市北仑区新大路32号1#仓" value="宁波市北仑区新大路32号1#仓"></el-option>
                          <el-option label="宁波市鄞州区" value="宁波市鄞州区"></el-option>
                          <el-option label="淄博市临淄区齐鲁化学工业园清田路20号" value="淄博市临淄区齐鲁化学工业园清田路20号"></el-option>
                          <el-option label="宁波市北仑区新大路32号2#仓" value="宁波市北仑区新大路32号2#仓"></el-option>
                          <el-option label="宁波市" value="宁波市"></el-option>
                        </el-select>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="editItem">
                      <div class="editLabel">仓库联系人</div>
                      <div class="editValue">
                        <el-select style="width: 100%" v-model="item.name" filterable @change="ckCahnge(item)">
                          <el-option label="张三" value="张三"></el-option>
                          <el-option label="李四" value="李四"></el-option>
                          <el-option label="马五" value="李四"></el-option>
                          <el-option label="龚六" value="李四"></el-option>
                        </el-select>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="editItem">
                      <div class="editLabel">仓库联系电话</div>
                      <div class="editValue">
                        <el-input v-model="item.phone"></el-input>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </template>
            <div class="addZg">
              <span @click="addZgList">+添加仓库地点</span>
            </div>
          </div>

          <div v-else>
            <template v-for="(item, index) in state.cklist" :key="index">
              <div class="ZGtip">
                <span class="ZGtiptext">仓库地点{{ index + 1 }}</span>
              </div>
              <el-descriptions class="descriptions" :column="2" size="default" border>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">进仓时间</div>
                  </template>
                  {{ item.date?.join("至") }}
                  <div class="datetype">{{ item.datetype }}</div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">仓库地点</div>
                  </template>
                  {{ item.address }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">仓库联系人</div>
                  </template>
                  {{ item.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">仓库联系电话</div>
                  </template>
                  {{ item.phone }}
                </el-descriptions-item>
              </el-descriptions>
              <div style="margin-bottom: 8px"></div>
            </template>
          </div>
        </div>

        <div class="tipBox">司机填报信息</div>
        <div v-if="state.isEdit" class="ZGBox">
          <div class="editBox">
            <el-row :gutter="16">
              <el-col :span="8">
                <div class="editItem">
                  <div class="editLabel">司机联系人</div>
                  <div class="editValue">
                    <el-input v-model="state.WriteCarTeam.driver"></el-input>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="editItem">
                  <div class="editLabel">司机号码</div>
                  <div class="editValue">
                    <el-input v-model="state.WriteCarTeam.phone"></el-input>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="editItem">
                  <div class="editLabel">车牌号码</div>
                  <div class="editValue">
                    <el-input v-model="state.WriteCarTeam.carnumber"></el-input>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div v-else>
          <el-descriptions class="descriptions" :column="4" size="default" border>
            <el-descriptions-item class-name="noBglabel">
              <template #label>
                <div class="cell-item">司机联系人</div>
              </template>
              {{ state.WriteCarTeam.driver }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="noBglabel" class-name="noBglabel">
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">司机号码</div>
              </template>
              {{ state.WriteCarTeam.phone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">车牌号码</div>
              </template>
              {{ state.WriteCarTeam.carnumber }}
            </el-descriptions-item>
          </el-descriptions>
          <div style="margin-bottom: 8px"></div>
        </div>

        <div class="tipBox">进仓信息</div>
        <div v-if="state.isEdit" class="ZGBox">
          <div class="editBox">
            <el-row :gutter="16">
              <el-col :span="8">
                <div class="editItem">
                  <div class="editLabel">进厂时间</div>
                  <div class="editValue">
                    <el-date-picker v-model="state.driver.jctime" type="datetime" placeholder="请选择" style="width: 100%"
                      format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="editItem">
                  <div class="editLabel">离厂时间</div>
                  <div class="editValue">
                    <el-date-picker v-model="state.driver.lctime" type="datetime" placeholder="请选择" style="width: 100%"
                      format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="editItem">
                  <div class="editLabel">进仓时间</div>
                  <div class="editValue">
                    <el-date-picker v-model="state.driver.jgtime" type="datetime" placeholder="请选择" style="width: 100%"
                      format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="16">
              <el-col :span="24">
                <div class="editItem">
                  <div class="editLabel">附件上传</div>
                  <div class="editValue filebox">
                    <div class="imglist" v-if="state.filelist.length != 0">
                      <div class="imgbox" v-for="(item, index) in state.filelist" :key="index">
                        <img :src="item.path" />

                        <el-icon class="delicon" @click="delimg(index)" size="12px" color="#FF0000">
                          <CircleCloseFilled />
                        </el-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div v-else>
          <el-descriptions class="descriptions" :column="4" size="default" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">进仓时间</div>
              </template>
              {{ state.driver.jctime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">离厂时间</div>
              </template>
              {{ state.driver.lctime }}
            </el-descriptions-item>
            <el-descriptions-item class-name="noBglabel">
              <template #label>
                <div class="cell-item">进仓时间</div>
              </template>
              {{ state.driver.jgtime }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="noBglabel" class-name="noBglabel">
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">附件上传</div>
              </template>
              <div class="imglist" v-if="state.filelist.length != 0">
                <div class="imgbox" v-for="(item, index) in state.filelist" :key="index">
                  <img :src="item.path" />

                  <el-icon class="delicon" @click="delimg(index)" size="12px" color="#FF0000" v-if="state.isEdit">
                    <CircleCloseFilled />
                  </el-icon>
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
          <div style="margin-bottom: 8px"></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import DispatchDetailInfomation from "./components/DispatchDetailInfomation.vue";
import logo from "@/assets/images/testImg/image7.png";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";

import { useStore } from "vuex";
const Store = useStore();

const route = useRoute();

Store.dispatch("tab/modifyTabTitle", {
  path: route.fullPath,
  title: route.query.title,
});


const state = reactive({
  isEdit: false,
  data: {
    status: 1,
    dispatchCode: "JH2401704",
    createTime: "2024-05-01 17:28",
    createBy: "孙向明",
    updateTime: "2024-05-05 18:48",
    updateBy: "李今颖",
  },
  cklist: route.query.status === '0' ? [
    {
      date: [],
      datetype: "",
      address: "",
      name: "",
      phone: "",
    },
  ] : [
    {
      date: ['2024-04-05'],
      datetype: "早上",
      address: "xxx仓库1",
      name: "17474787477",
      phone: "17474787477",
    },
  ],
  WriteCarTeam: {
    driver: "",
    phone: "",
    carnumber: "",
  },
  filelist: [
    {
      name: "1",
      path: logo,
    }
  ],
  driver: {
    jctime: "",
    lctime: "",
    jgtime: "",
  }
})

const addZgList = () => {
  state.zglist.push({
    date: [],
    datetype: "1",
    address: "",
    name: "",
    phone: "",
  });
};
const delZg = (i) => {
  state.zglist.splice(i, 1);
};

const edit = () => {
  state.isEdit = true;
};
const save = () => {
  ElMessage.success("保存成功");
  state.isEdit = false;
};
const cancel = () => {
  state.isEdit = false;
};

const setMess = (i) => {
  if (i == 0) {
    state.zglist = [
      {
        date: [],
        datetype: "",
        address: "",
        name: "",
        phone: "",
      },
    ];
    state.WriteCarTeam = {
      driver: "",
      phone: "",
      carnumber: "",
    };
    state.driver = {
      jctime: "",
      lctime: "",
      jgtime: "",
    };
    state.filelist = [];
  } else if (i == 1) {
    state.zglist = [
      {
        date: [],
        datetype: "",
        address: "",
        name: "",
        phone: "",
      },
    ];
    state.WriteCarTeam = {
      driver: "",
      phone: "",
      carnumber: "",
    };
    state.driver = {
      jctime: "",
      lctime: "",
      jgtime: "",
    };
    state.filelist = [];
  } else {
    state.zglist = [
      {
        date: ['2024-04-05', '2024-05-06'],
        datetype: "早上",
        address: "宁波市",
        name: "张三",
        phone: "13252293389",
      },
      {
        date: ['2024-04-05', '2024-05-06'],
        datetype: "早上",
        address: "宁波市鄞州区",
        name: "李四",
        phone: "15057730058",
      }
    ];
    state.WriteCarTeam = {
      driver: "飞虎",
      phone: "15362548545",
      carnumber: "粤BLLO88",
    };
    state.driver = {
      jctime: "2024-04-05 15:25:12",
      lctime: "2024-04-05 15:25:12",
      jgtime: "2024-04-05 15:25:12",
    };
    state.filelist = [
      {
        name: '1',
        path: logo
      }
    ];
  }
};

const ckCahnge = (item) => {
  item.phone = '13252293389';
}
const driverChange = () => {
  state.WriteCarTeam.carnumber = '粤BLLO88';
  state.WriteCarTeam.phone = '17586864545';
}

onMounted(() => {
  if (route.query) {
    state.data.status = route.query.status == '0' ? 0 : route.query.status * 1;
    setMess(state.data.status);
  }
});

</script>

<style lang="scss" scoped>
.tab-box {
  height: 32px !important;
  display: flex;
  align-items: center;
  padding: 0px 6px;
  margin-bottom: 5px;

  :deep(.el-button) {
    // font-weight: bold;
    margin: 0 10px;
    color: #5a9cf8;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0px;
  }
}

.tab-container {
  border: none;
  border-radius: 2px;
  background: #ffffff;
}

.el-tabs {
  border-top: none;
  border-right: none;
  border-bottom: none;
}

:deep(.el-tabs--border-card > .el-tabs__header) {
  background-color: #f8f8f8;
}

:deep(.el-tabs--border-card > .el-tabs__content) {
  display: none;
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item) {
  border-top: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
  margin-top: 0;
  padding: 0 10px !important;
  height: 36px;
  font-size: 14px;
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  color: rgba(51, 51, 51, 1);
}

.tabBox {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  border-top: none;
  background: #ffffff;

  .tipBox {
    background: rgba(245, 248, 247, 1);
    height: 24px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 0px;
    padding: 0 8px;
    margin-bottom: 8px;
  }
}

.descriptions {
  :deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
    padding: 4px;
    font-size: 12px;
  }

  :deep(.el-descriptions__table) {
    table-layout: fixed;
    word-break: break-all;
  }

  :deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
    background: rgba(245, 248, 247, 0.5);
    font-weight: normal;
    color: rgba(0, 0, 0, 0.85);
    font-size: 12px;
    width: 104px;
  }

  :deep(.noBglabel) {
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;

    &:last-child {
      border-right: 1px solid #ebeef5 !important;
    }
  }

  .datetype {
    float: right;
    width: 100px;
    text-align: center;
    // background-color: #5a9cf8;
    border-left: 1px solid #EAEAEA;
  }
}

.ZGBox {
  .ZGtip {
    border-radius: 2px;
    background: rgba(230, 247, 255, 1);
    border: 1px solid rgba(145, 213, 255, 1);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    height: 28px;
    width: 100%;
    padding: 0 16px;
    margin-bottom: 8px;

    .ZGtiptext {
      color: rgba(0, 0, 0, 0.85);
      font-size: 12px;
      line-height: 26px;
      letter-spacing: 0px;
    }

    .ZGtipdel {
      color: rgba(59, 120, 255, 0.85);
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      line-height: 26px;
      cursor: pointer;
    }
  }
}

.editBox {
  box-sizing: border-box;
  padding: 0px 8px;

  .editItem {
    display: flex;
    margin-bottom: 8px;

    .editLabel {
      width: 85px;
      text-align: left;
      color: rgba(0, 0, 0, 0.85);
      font-size: 12px;
      line-height: 24px;
      letter-spacing: 0px;
    }

    .editValue {
      display: flex;
      flex: 1;
    }
  }
}

.addZg {
  color: rgba(59, 120, 255, 1);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
  margin-bottom: 8px;
  box-sizing: border-box;
  padding-left: 8px;

  span {
    cursor: pointer;
  }
}

:deep(.el-button.is-link.is-disabled) {
  color: rgba(220, 220, 220, 1);
}

.uploadBtn {
  height: 24px;
  display: inline-block;
  color: rgba(59, 120, 255, 1);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
  display: flex;
  align-items: center;

  i {
    margin-right: 4px;
  }
}

:deep(.el-upload-list) {
  display: none;
}

.filebox {
  align-items: center;
}

.imglist {
  height: 48px;
  display: flex;

  .imgbox {
    width: 48px;
    height: 48px;
    margin-right: 8px;
    position: relative;

    img {
      display: block;
      width: 100%;
      height: 100%;
    }

    .delicon {
      position: absolute;
      cursor: pointer;
      top: -6px;
      right: -6px;
    }
  }
}
</style>
